<template>
  <div :class="disabled ? 'metaNumberInput metaNumberInput_bgDisable': 'metaNumberInput metaNumberInput_bg'">
    <el-input-number v-model="number" :controls="false" :disabled="disabled" @change="onInputChange"></el-input-number>
    <div class="metaNumberInput_controlsArea">
      <div v-if="!disabled && !reduceDisable" class="metaNumberInputControls_reduce" @click="doNumReduce"></div>
      <div v-else class="metaNumberInputControls_reduceDisable"></div>
      <div v-if="!disabled && !plusDisable" class="metaNumberInputControls_plus" @click="doNumPlus"></div>
      <div v-else class="metaNumberInputControls_plusDisable"></div>
      <div class="metaNumberInputControls_unit">{{ unit }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MetaNumberInput',
  mixins: [],
  props: {
    paramKey: {
      type: String,
      default: ''
    },
    num: {
      type: Number,
      default: 0
    },
    step: { //数据增加或减少的步长
      type: Number,
      default: 1
    },
    precision: { //数据精度（保留位数）
      type: Number,
      default: 0
    },
    max: { //最大
      type: Number,
      default: 999999999
    },
    min: { //最小
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    unit: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      number: 0,
      plusDisable: false,
      reduceDisable: false
    }
  },
  created() {},
  mounted() {
    this.number = this.num
    if(this.max == this.min) {
      this.number = this.max
      this.reduceDisable = true
      this.plusDisable = true
    }
    this.onInputChange(this.number)
  },
  watch:{
    num(val, oldVal){
      this.number = val
      this.onInputChange(val)
    },
    min(val, oldVal) {
      this.number = this.num
      this.onInputChange(this.number)
    }
  },
  methods: {
    onInputChange(val) {
      let myVal = val
      if(!myVal) {
        myVal = this.min
      }
      if(myVal >= this.max) {
        this.number = this.max
        this.plusDisable = true
        if(this.reduceDisable) {
          this.reduceDisable = false
        }
      }else if(myVal <= this.min) {
        this.number = this.min
        this.reduceDisable = true
        if(this.plusDisable) {
          this.plusDisable = false
        }
      }else {
        if(this.plusDisable) {
          this.plusDisable = false
        }
        if(this.reduceDisable) {
          this.reduceDisable = false
        }
      }
      this.number = this.toDecimal(this.number,this.precision)
      let cParams = {
        key: this.paramKey,
        value: this.number
      }
      this.$emit('numberInputValueChange', cParams)
    },
    toDecimal(x,precision) {   
      var f = parseFloat(x);   
      if (isNaN(f)) {   
        return;   
      }
      let p = 1
      if(precision !== 0) {
        let p2 = '1'
        for(let i = 0; i < precision; i++) {
          p2 += '0'
        }
        p = parseInt(p2)        
      }
      f = Math.round(x * p) / p;   
      return f;   
    },
    doNumPlus() {
      this.number = this.number + this.step
      this.onInputChange(this.number)
    },
    doNumReduce() {
      this.number = this.number - this.step
      this.onInputChange(this.number)
    }
  }
}
</script>
<style lang="less">
.metaNumberInput {
  width: 86px;
  height: 86px;
  background-size: 100% 100%;
  .metaNumberInput_controlsArea {
    width: 100%;
    height: 20px;
    position: relative;
    .metaNumberInputControls_reduce {
      border-radius: 24px;
      cursor: pointer;
      position: absolute;
      top: -11px;
      left: -1px;
      width: 24px;
      height: 24px;
      background-size: 100% 100%;
      background-image: url('~@/assets/images/v3/numberInput_reduce.png');
    }
    .metaNumberInputControls_plus {
      border-radius: 24px;
      cursor: pointer;
      position: absolute;
      top: -11px;
      right: -1px;
      width: 24px;
      height: 24px;
      background-size: 100% 100%;
      background-image: url('~@/assets/images/v3/numberInput_plus.png');
    }
    .metaNumberInputControls_reduceDisable {
      border-radius: 24px;
      cursor: not-allowed;
      position: absolute;
      top: -11px;
      left: -1px;
      width: 24px;
      height: 24px;
      background-size: 100% 100%;
      background-image: url('~@/assets/images/v3/numberInput_reduceDisable.png');
    }
    .metaNumberInputControls_plusDisable {
      border-radius: 24px;
      cursor: not-allowed;
      position: absolute;
      top: -11px;
      right: -1px;
      width: 24px;
      height: 24px;
      background-size: 100% 100%;
      background-image: url('~@/assets/images/v3/numberInput_plusDisable.png');
    }
    .metaNumberInputControls_unit {
      width: 40%;
      height: 20px;
      position: absolute;
      bottom: 2px;
      margin-left: 30%;
      color: #114ca6;
      font-size: 10px;
      text-align: center;
    }
  }
}
.metaNumberInput_bg {
  background-image: url('~@/assets/images/v3/numberInput_bg.png');
}
.metaNumberInput_bgDisable {
  background-image: url('~@/assets/images/v3/numberInput_bgDisable.png');
}
.metaNumberInput .el-input-number {
  width: 66px!important;
  height: 66px!important;
  padding: 4px 8px!important;
  box-sizing: border-box;
  margin-top: 2px!important;
  margin-left: 10px!important;
}
.metaNumberInput .el-input {
  width: 100%!important;
  height: 100%!important;
}
.metaNumberInput .el-input__inner {
  width: 100%!important;
  height: 100%!important;
  background: unset!important;
  padding: 0!important;
  border: none!important;
  font-size: 20px!important;
  color: #0F3795!important;
}
</style>
